<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:text-align="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>零钱理财</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body{
            padding-left: 20px;
            padding-right: 20px;
            background-color: #F4F6FA;
        }
        #my{
            margin: 20px;
        }
        .my-0{
            width: 100%;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
            padding-top: 10px;
            background-color: white;
        }
        .card-header{
            width: 100%;
            height: 50px;
            background-color: #26BABD;
            font-size: 20px;
            padding-top: 10px;
            padding-left: 10px;
        }
        .btn1{
            background-color: #F97A70;
            color: white;
            border-radius: 5px;
            border: none;
        }
        .btn1:hover{
            background-color: red;
        }
        .card-link{
            color: white;
        }
        body {
            background-color: #F4F6FA;
        }

        a {
            text-decoration: none;
            color: white;
        }

        span {
            color: #26BABD;
        }

        .modal-content {
            background-color: #F4F6FA;
        }

        .modal-body {
            margin-left: 10%;
        }

        td {
            padding-left: 20px;
            font-size: 18px;
        }

        tr {
            margin-top: 20px;
        }

        input {
            border-radius: 5px;
        }

        .btn {
            background-color: white;
        }

        .btn-upd {
            background-color: #26BABD;
            color: white;
        }

        .modal {
            width: 40%;
            margin-left: 30%;
        }

        select {
            width: 210px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div id="my">
    <div id="app">
        <div class="card-header"><span class="card-link">我的理财</span></div>
        <div id="accordion">
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" href="#table1">
                        零钱理财
                    </a>
                </div>
                <div id="table1" class="collapse show"  data-parent="#accordion">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr class="table-primary">
                            <th>序号</th>
                            <th>产品名称</th>
                            <th>投资金额</th>
                            <th>起投时间</th>
                            <th>投资期限</th>
                            <th>收益</th>
                            <th>平均收益率</th>
                            <th>投资状态</th>
                            <th>相关操作</th>
                        </tr>
                        </thead>
                        <tbody class="tbody" v-for="changeMoney in list1">
                        <tr>
                            <td v-text="changeMoney.mc_id"></td>
                            <td v-text="changeMoney.changeMoney.c_name"></td>
                            <td v-text="changeMoney.amount+'元'"></td>
                            <td v-text="changeMoney.c_time"></td>
                            <td v-text="changeMoney.changeMoney.investmentHorizon.h_day"></td>
                            <td v-text="changeMoney.c_earning+'元'">收益</td>
                            <td v-text="changeMoney.c_avgRate+'%'">平均收益率</td>
                            <td v-text="changeMoney.s_name" class="sname"></td>
                            <td v-if="changeMoney.s_name == '已赎回'">
                                <button class="btn1" @click="warn(changeMoney.s_name)">× 赎回</button>
                            </td>
                            <td v-if="changeMoney.s_name == '已失效'">
                                <button  class="btn1" @click="warn(changeMoney.s_name)">× 赎回</button>
                            </td>
                            <td v-if="changeMoney.s_name == '持有中'">
                                <button  class="btn1" @click="selectBanksMC(changeMoney.mc_id,changeMoney.amount+changeMoney.c_earning)" data-target="#ChooseBankMC" data-toggle="modal">× 赎回</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" href="#table2">
                        工资理财
                    </a>
                </div>
                <div id="table2" class="collapse"  data-parent="#accordion">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr class="table-primary">
                            <th>序号</th>
                            <th>产品名称</th>
                            <th>投资金额</th>
                            <th>起投时间</th>
                            <th>投资期限</th>
                            <th>收益</th>
                            <th>平均收益率</th>
                            <th>投资状态</th>
                            <th>相关操作</th>
                        </tr>
                        </thead>
                        <tbody class="tbody" v-for="mypayMoney in list2">
                        <tr>
                            <td v-text="mypayMoney.mp_id"></td>
                            <td v-text="mypayMoney.payMoney.productType.pro_type">产品名称</td>
                            <td v-text="mypayMoney.amount+'元'">投资金额</td>
                            <td v-text="mypayMoney.p_time">起投时间</td>
                            <td v-text="mypayMoney.payMoney.investmentHorizon.h_day">投资期限</td>
                            <td v-text="mypayMoney.p_earning+'元'">收益</td>
                            <td v-text="mypayMoney.p_avgRate+'%'">平均收益率</td>
                            <td v-text="mypayMoney.s_name"></td>
                            <td v-if="mypayMoney.s_name == '已赎回'">
                                <button class="btn1" @click="warn(mypayMoney.s_name)">× 赎回</button>
                            </td>
                            <td v-if="mypayMoney.s_name == '已失效'">
                                <button  class="btn1" @click="warn(mypayMoney.s_name)">× 赎回</button>
                            </td>
                            <td v-if="mypayMoney.s_name == '持有中'">
                                <button  class="btn1" @click="selectBanksMP(mypayMoney.mp_id,mypayMoney.amount+mypayMoney.p_earning)" data-target="#ChooseBankMP"  data-toggle="modal">× 赎回</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" href="#table3">
                        期限理财
                    </a>
                </div>
                <div id="table3" class="collapse"  data-parent="#accordion">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr class="table-primary">
                            <th>序号</th>
                            <th>产品名称</th>
                            <th>投资金额</th>
                            <th>起投时间</th>
                            <th>投资期限</th>
                            <th>收益</th>
                            <th>平均收益率</th>
                            <th>投资状态</th>
                            <th>相关操作</th>
                        </tr>
                        </thead>
                        <tbody class="tbody" v-for="myTermFinancial in list3">
                        <tr>
                            <td v-text="myTermFinancial.mt_id">序号</td>
                            <td v-text="myTermFinancial.termFinancial.t_name">产品名称</td>
                            <td v-text="myTermFinancial.amount+'元'">投资金额</td>
                            <td v-text="myTermFinancial.t_time">起投时间</td>
                            <td v-text="myTermFinancial.termFinancial.investmentHorizon.h_day">投资期限</td>
                            <td v-text="myTermFinancial.t_earning+'元'">收益</td>
                            <td v-text="myTermFinancial.t_avgRate+'%'">平均收益率</td>
                            <td v-text="myTermFinancial.s_name" class="sname">投资状态</td>
                            <td v-if="myTermFinancial.s_name == '已赎回'">
                                <button class="btn1" @click="warn(myTermFinancial.s_name)">× 赎回</button>
                            </td>
                            <td v-if="myTermFinancial.s_name == '已失效'">
                                <button  class="btn1" @click="warn(myTermFinancial.s_name)">× 赎回</button>
                            </td>
                            <td v-if="myTermFinancial.s_name == '持有中'">
                                <button  class="btn1" @click="selectBanksMT(myTermFinancial.mt_id,myTermFinancial.amount+myTermFinancial.t_earning)" data-target="#ChooseBankMT" data-toggle="modal">× 赎回</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" href="#table4">
                        基金理财
                    </a>
                </div>
                <div id="table4" class="collapse"  data-parent="#accordion">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr class="table-primary">
                            <th>序号</th>
                            <th>产品名称</th>
                            <th>投资金额</th>
                            <th>起投时间</th>
                            <th>投资期限</th>
                            <th>收益</th>
                            <th>平均收益率</th>
                            <th>投资状态</th>
                            <th>相关操作</th>
                        </tr>
                        </thead>
                        <tbody class="tbody" v-for="myFundManagement in list4">
                        <tr>
                            <td v-text="myFundManagement.mf_id">序号</td>
                            <td v-text="myFundManagement.fundManagement.fundType.type_name">产品名称</td>
                            <td v-text="myFundManagement.amount+'元'">投资金额</td>
                            <td v-text="myFundManagement.f_time">起投时间</td>
                            <td v-text="myFundManagement.fundManagement.investmentHorizon.h_day">投资期限</td>
                            <td v-text="myFundManagement.f_earning+'元'"></td>
                            <td v-text="myFundManagement.f_avgRate+'%'">平均收益率</td>
                            <td v-text="myFundManagement.s_name" class="sname">投资状态</td>
                            <td v-if="myFundManagement.s_name == '已赎回'">
                                <button class="btn1" @click="warn(myFundManagement.s_name)">× 赎回</button>
                            </td>
                            <td v-if="myFundManagement.s_name == '已失效'">
                                <button  class="btn1" @click="warn(myFundManagement.s_name)">× 赎回</button>
                            </td>
                            <td v-if="myFundManagement.s_name == '持有中'">
                                <button  class="btn1" @click="selectBanksMF(myFundManagement.mf_id,myFundManagement.amount+myFundManagement.f_earning)"  data-target="#ChooseBankMF" data-toggle="modal">× 赎回</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
<!--        零钱赎回模态框-->
        <div class="modal fade" id="ChooseBankMC">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">赎回零钱投资</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!--                 模态框主体 -->
                    <div class="modal-body">
                        <form>
                            <table>
                                <tr>
                                    <td><span>银行：</span></td>
                                    <td colspan="2">
                                        <select name="bank_id" v-model="bank_id">
                                            <option>---请选择到账银行卡---</option>
                                            <option v-for="bank in banks" :value="bank.bank_id">
                                                {{bank.bank.b_name}}(**** **** **** {{bank.bank_card.substr(15,4)}})
                                            </option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td><span>赎回金额(元)：</span></td>
                                    <td><input type="text"  v-model="params.allMoney" readonly></td>
                                </tr>
                                <tr>
                                    <td><span>交易密码：</span></td>
                                    <td>
                                        <input type="password" v-model="params.pwd" placeholder="请输入交易密码" @blur="checkPwd()">
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn" data-dismiss="modal">关闭
                        </button>
                        <button type="submit" v-on:click="updateMyChange(params.mc_id,bank_id,params.allMoney)" class="btn btn-upd">
                            提交
                        </button>
                    </div>
                </div>
             </div>
        </div>
        <!--        工资赎回模态框-->
        <div class="modal fade" id="ChooseBankMP">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">赎回工资投资</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!--                 模态框主体 -->
                    <div class="modal-body">
                        <form>
                            <table>
                                <tr>
                                    <td><span>银行：</span></td>
                                    <td colspan="2">
                                        <select name="bank_id" v-model="bank_id">
                                            <option>---请选择到账银行卡---</option>
                                            <option v-for="bank in banks" :value="bank.bank_id">
                                                {{bank.bank.b_name}}(**** **** **** {{bank.bank_card.substr(15,4)}})
                                            </option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td><span>赎回金额(元)：</span></td>
                                    <td><input type="text" v-model="params.allMoney" readonly></td>
                                </tr>
                                <tr>
                                    <td><span>交易密码：</span></td>
                                    <td>
                                        <input type="password" v-model="params.pwd" placeholder="请输入交易密码" @blur="checkPwd()">
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn" data-dismiss="modal">关闭
                        </button>
                        <button type="submit"  v-on:click="updateMyPay(params.mp_id,bank_id,params.allMoney)" class="btn btn-upd">
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!--        期限赎回模态框-->
        <div class="modal fade" id="ChooseBankMT">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">赎回期限投资</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!--                 模态框主体 -->
                    <div class="modal-body">
                        <form>
                            <table>
                                <tr>
                                    <td><span>银行：</span></td>
                                    <td colspan="2">
                                        <select name="bank_id" v-model="bank_id">
                                            <option>---请选择到账银行卡---</option>
                                            <option v-for="bank in banks" :value="bank.bank_id">
                                                {{bank.bank.b_name}}(**** **** **** {{bank.bank_card.substr(15,4)}})
                                            </option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td><span>赎回金额(元)：</span></td>
                                    <td><input type="text"  v-model="params.allMoney" readonly></td>
                                </tr>
                                <tr>
                                    <td><span>交易密码：</span></td>
                                    <td>
                                        <input type="password" v-model="params.pwd" placeholder="请输入交易密码" @blur="checkPwd()">
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn" data-dismiss="modal">关闭
                        </button>
                        <button type="submit"  v-on:click="updateMyTerm(params.mt_id,bank_id,params.allMoney)" class="btn btn-upd">
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!--        基金赎回模态框-->
        <div class="modal fade" id="ChooseBankMF">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">赎回基金投资</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!--                 模态框主体 -->
                    <div class="modal-body">
                        <form>
                            <table>
                                <tr>
                                    <td><span>银行：</span></td>
                                    <td colspan="2">
                                        <select name="bank_id" v-model="bank_id">
                                            <option>---请选择到账银行卡---</option>
                                            <option v-for="bank in banks" :value="bank.bank_id">
                                                {{bank.bank.b_name}}(**** **** **** {{bank.bank_card.substr(15,4)}})
                                            </option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td><span>赎回金额(元)：</span></td>
                                    <td><input type="text" v-model="params.allMoney" readonly></td>
                                </tr>
                                <tr>
                                    <td><span>交易密码：</span></td>
                                    <td>
                                        <input type="password" v-model="params.pwd" placeholder="请输入交易密码" @blur="checkPwd()">
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn" data-dismiss="modal">关闭
                        </button>
                        <button type="submit"  v-on:click="updateMyFund(params.mf_id,bank_id,params.allMoney)" class="btn btn-upd">
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    let app = new Vue({
        el: '#my',
        name: 'myFinancial',
        data: function(){
            return{
                list1: [],
                list2: [],
                list3: [],
                list4: [],
                banks: [],
                bank_id: '',
                params:{
                    mc_id:'',
                    mp_id:'',
                    mt_id:'',
                    mf_id:'',
                    pwd:'',
                    allMoney:''
                }
            }
        },
        created :function () {
            axios({
                url: '/getManagementAll',
            }).then(res => {
                console.log(res.data);
                this.list1 = res.data.myChanges;
                this.list2 = res.data.myPays;
                this.list3 = res.data.myTerms;
                this.list4 = res.data.myFunds;
            });
        },
        methods: {
            cut(path) {
                window.parent.cut(path);
            },
            //点击提交时的表达验证
            IsNull(){
                if(this.bank_id==''){
                    this.$message("请选择银行卡！")
                    return false;
                }
                if(this.params.pwd==''){
                    this.$message("请输入交易密码！")
                    return false;
                }
            },
            //点击失效按钮时，提示不可赎回信息
            warn(s_name){
                if(s_name=='已失效'){
                    this.$message({
                        showClose: true,
                        message: '当前理财已失效不可赎回！',
                        type: 'warning'
                    });
                }
                if(s_name=='已赎回'){
                    this.$message({
                        showClose: true,
                        message: '当前理财已赎回！',
                        type: 'warning'
                    });
                }

            },
            //核对交易密码是否正确
            checkPwd(){
                axios.post('/checkDeal_Pwd').then(res => {
                    if (res.data.flag == true) {
                        if(this.params.pwd==res.data.deal_pwd){
                            return true;
                        }else{
                            alert("交易密码错误！");
                            return false;
                        }
                    }
                })
            },
            //查询银行卡，保留序号
            selectBanksMC(mc_id,allMoney){
                this.params.allMoney=allMoney;
                axios.post('/selectBankByUid').then(res => {
                    this.params.mc_id = mc_id;
                    if (res.data.flag == true) {
                        console.log(res.data.banksinfo);
                        this.banks = res.data.banksinfo;
                    }
                })
            },
            selectBanksMP(mp_id,allMoney){
                this.params.allMoney=allMoney;
                axios.post('/selectBankByUid').then(res => {
                    this.params.mp_id = mp_id;
                    if (res.data.flag == true) {
                        console.log(res.data.banksinfo);
                        this.banks = res.data.banksinfo;
                    }
                })
            },
            selectBanksMT(mt_id,allMoney){
                this.params.allMoney=allMoney;
                axios.post('/selectBankByUid').then(res => {
                    this.params.mt_id = mt_id;
                    if (res.data.flag == true) {
                        console.log(res.data.banksinfo);
                        this.banks = res.data.banksinfo;
                    }
                })
            },
            selectBanksMF(mf_id,allMoney){
                this.params.allMoney=allMoney;
                axios.post('/selectBankByUid').then(res => {
                    this.params.mf_id = mf_id;
                    if (res.data.flag == true) {
                        console.log(res.data.banksinfo);
                        this.banks = res.data.banksinfo;
                    }
                })
            },
            //模态框提交时修改理财状态并且修改银行卡余额
            updateMyChange(mc_id,bank_id,money) {
                this.params.mc_id=mc_id;
                this.params.allMoney=money;
                this.bank_id=bank_id;
                this.IsNull();
                axios.post('/updateMyChange/', "mc_id=" + mc_id+"&bank_id="+bank_id+"&money="+money).then(res => {
                        if (res.data.flag == true) {
                            console.log(res.data.myChanges);
                            window.location.href="myFinancial.html";
                            this.list1 = res.data.myChanges;
                        }
                    })
                    return true;
            },
            updateMyPay(mp_id,bank_id,money) {
                this.params.mp_id=mp_id;
                this.params.allMoney=money;
                this.bank_id=bank_id;
                this.IsNull();
                axios.post('/updateMyPay', "mp_id=" + mp_id+"&bank_id="+bank_id+"&money="+money).then(res => {
                    if (res.data.flag == true) {
                        console.log(res.data.myPays);
                        window.location.href="myFinancial.html";
                        this.list2 = res.data.myPays;
                    }
                })
                return true;
            },
            updateMyTerm(mt_id,bank_id,money) {
                this.params.mt_id=mt_id;
                this.params.allMoney=money;
                this.bank_id=bank_id;
                this.IsNull();
                axios.post('/updateMyTerm', "mt_id=" + mt_id+"&bank_id="+bank_id+"&money="+money).then(res => {
                    if (res.data.flag == true) {
                        console.log(res.data.myTerms);
                        window.location.href="myFinancial.html";
                        this.list3 = res.data.myTerms;
                    }
                })
                return true;
            },
            updateMyFund(mf_id,bank_id,money) {
                this.params.mf_id=mf_id;
                this.params.allMoney=money;
                this.bank_id=bank_id;
                this.IsNull();
                axios.post('/updateMyFund', "mf_id=" + mf_id+"&bank_id="+bank_id+"&money="+money).then(res => {
                    if (res.data.flag == true) {
                        console.log(res.data.myFunds);
                        window.location.href="myFinancial.html";
                        this.list4 = res.data.myFunds;
                    }
                })
                return true;
            }
        }
    });
</script>
</html>